<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
      <el-form-item :label="$t('employing_company')" prop="employerId">
        <employerSelect v-model="queryParams.employerId" @change="employerChange"></employerSelect>
      </el-form-item>
      <el-form-item :label="$t('employee_name')" prop="employeeId">
        <el-select v-model="queryParams.employeeId" filterable ref="select"
          :placeholder="$t('please_enter', { name: $t('employee_name') })">
          <el-option v-for="(item, index) of employeeList" :label="item.employeeName" :value="item.id"
            :key="index"></el-option>
            <!-- <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-size="10"
              layout="total, prev, pager, next"
              :total="10"
            >
        </el-pagination> -->

        </el-select>
      </el-form-item>
      <el-form-item :label="$t('department')" prop="employerDeptId">
        <treeselect :normalizer="normalizer" v-model="queryParams.employerDeptId" :options="deptOptions"
          :show-count="true" :placeholder="$t('please_select', { name: $t('department') })"
          style="width: 240px; height: 32px" />
      </el-form-item>
      <el-form-item :label="$t('leave_type')" prop="vacationId">
        <el-select filterable v-model="queryParams.vacationId"
          :placeholder="$t('please_select', { name: $t('leave_type') })" clearable>
          <el-option v-for="dict in attendanceList" :key="dict.id" :label="dict.vacationName" :value="dict.id" />
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('employee_code')" prop="employeeCode">
        <el-input v-model="queryParams.employeeCode" :placeholder="$t('please_enter', { name: $t('employee_code') })"
          clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('application_time')" prop="applicationDateRange">
        <el-date-picker v-model="applicationDateRange" style="width: 220px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" :start-placeholder="$t('start_date')"
          :end-placeholder="$t('ending_date')"></el-date-picker>
      </el-form-item>
      <el-form-item :label="$t('leave_period')" prop="dateRange">
        <el-date-picker v-model="dateRange" style="width: 220px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" :start-placeholder="$t('start_date')"
          :end-placeholder="$t('ending_date')"></el-date-picker>
      </el-form-item>
      <el-form-item :label="$t('approval_time')" prop="approvalDateRange">
        <el-date-picker v-model="approvalDateRange" style="width: 220px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" :start-placeholder="$t('start_date')"
          :end-placeholder="$t('ending_date')"></el-date-picker>
      </el-form-item>
      <el-form-item :label="$t('approval_status')" prop="leaveState">
        <el-select filterable v-model="queryParams.leaveState"
          :placeholder="$t('please_select', { name: $t('approval_status') })" clearable>
          <el-option v-for="dict in dict.type.leave_approval_status" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t("search") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
      $t("reset")
    }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-col :span="1.5">
          <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport">{{ $t("import")
            }}</el-button>
        </el-col>
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">{{
      $t("export_holiday_application_records") }}</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="detailsList" @selection-change="handleSelectionChange" border
      :max-height="tableHeight" @sort-change="sortChange">
      <!-- <el-table-column :label="$t('application_date')" align="center"  prop="createTime" :show-overflow-tooltip="true" min-width="120" /> -->
      <!-- <el-table-column :label="$t('employer_code')" align="center" prop="employerCode" :show-overflow-tooltip="true" min-width="120" /> -->
      <el-table-column :label="$t('employer_name')" align="center" prop="employerName" :show-overflow-tooltip="true"
        min-width="120" />
      <el-table-column :label="$t('employee_code')" align="center" prop="employeeCode" :show-overflow-tooltip="true"
        min-width="120" />
      <el-table-column :label="$t('employee_name')" align="center" prop="employeeName" :show-overflow-tooltip="true"
        min-width="120" />
      <el-table-column :label="$t('department')" align="center" prop="employerDeptName" :show-overflow-tooltip="true"
        min-width="120" />
      <el-table-column :label="$t('position')" align="center" prop="positionName" :show-overflow-tooltip="true"
        min-width="120" />
      <el-table-column :label="$t('leave_type')" align="center" prop="holidayType" :show-overflow-tooltip="true"
        min-width="120" />
      <el-table-column :label="$t('leave_start_time')" align="center" prop="leaveStartDate"
        :show-overflow-tooltip="true" min-width="140" sortable="custom" />
      <el-table-column :label="$t('leave_end_time')" align="center" prop="leaveEndDate" :show-overflow-tooltip="true"
        min-width="140" sortable="custom" />
      <el-table-column :label="$t('number_of_leave_days')" align="center" prop="leaveDays" :show-overflow-tooltip="true"
        min-width="120" />
      <el-table-column :label="$t('reason_taking_leave')" align="center" prop="leaveReason"
        :show-overflow-tooltip="true" min-width="120" />
      <el-table-column :label="$t('upload_attachment')" align="center" prop="leaveFile" :show-overflow-tooltip="true"
        min-width="120" />
      <el-table-column :label="$t('application_time')" align="center" prop="createTime" :show-overflow-tooltip="true"
        min-width="120" sortable="custom" />
        <el-table-column :label="$t('approval_status')" align="center" prop="leaveState" :show-overflow-tooltip="true"
        min-width="120" >
      <template slot-scope="scope">
        <!-- 待审批 0    已审批 2  已拒绝 3  已取消 4 -->
        {{scope.row.leaveState == 0 ? "待审批" : scope.row.leaveState == 2 ? "已审批" : scope.row.leaveState == 3 ? "已拒绝" : scope.row.leaveState == 4 ? "已取消" : ""}}
      </template>
      </el-table-column>
      <el-table-column :label="$t('approver')" align="center" prop="auditName" :show-overflow-tooltip="true"
        min-width="120" />

      <!-- <el-table-column :label="$t('holiday_group')" align="center" prop="vacationName"
        :show-overflow-tooltip="true" min-width="120" /> -->
      <!-- <el-table-column :label="$t('work_location')" align="center" prop="workAddress" :show-overflow-tooltip="true"
            min-width="120" />

        <el-table-column :label="$t('employee_number')" align="center" prop="workNo" :show-overflow-tooltip="true"
          min-width="120">
        </el-table-column>
        <el-table-column :label="$t('mobile_phone_number')" align="center" prop="phone" :show-overflow-tooltip="true"
          min-width="120">
        </el-table-column> -->
      <!-- <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.attendanceRecordShiftDTOList" :key="index">
            <dict-tag :options="dict.type.check_work_status" :value="item.status" />
          </div>
        </template> -->


      <!-- </el-table-column> -->
      <!-- <el-table-column :label="$t('approval_time')" align="center" prop="auditDate" :show-overflow-tooltip="true" min-width="120" /> -->
      <!-- <el-table-column :label="$t('logo')" align="center" prop="leaveFile" :show-overflow-tooltip="true" min-width="120" >
        <template slot-scope="scope">
          <el-popover placement="bottom" width="200" trigger="hover">
            <img  :src="scope.row.leaveFile" class="imgStyle" />
            <img
              slot="reference"
              :src="scope.row.leaveFile ? scope.row.leaveFile:''"
              style="max-height: 100px; max-width: 100px"
            />
          </el-popover>
        </template>
      </el-table-column> -->
   
      <el-table-column :label="$t('remarks')" align="center" prop="remark" :show-overflow-tooltip="true"
        min-width="120" />
 
     
       
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" :page-sizes="[10, 20, 30, 50, 100, 200]" />

    <!-- 导入弹窗 -->
    <importModal ref="importModal" :title="$t('import_attendance_records')"
      uploadUrl="/business/holidayApplicationRecord/importTemplate.do" @refreshList="getList" :ifHasTemplate="false">
    </importModal>
  </div>
</template>

<script>
import {
  listDetails,
  jqVacationAllList,
} from "@/api/custom/vacationReportRecords";
import { pageListByEmployer } from "@/api/custom/employeeList";
import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import employeeHeader from "@/views/custom/employeeList/detail/header.vue";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import employerSelect from "@/views/components/custom/employerSelect.vue";
import importModal from "@/views/components/custom/importModal.vue";
export default {
  components: {
    Treeselect,
    employeeHeader,
    employerSelect,
    importModal
  },
  name: "Details",
  dicts: ["check_work_status", "leave_approval_status"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      // 日期范围
      dateRange: [],
      applicationDateRange: [],
      approvalDateRange: [],
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 考勤详情表格数据
      detailsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        employerName: null,
        employerDeptId: null,
        employeeId: null,
        status: null,
        vacationId: null,
        employeeCode: null,
        applicationStartDate: null,
        applicationEndDate: null,
        holidayStartDate: null,
        holidayEndDate: null,
        applyStartDate: null,
        applyEndDate: null,
      },
      employeeList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      deptOptions: [],
      //考勤组集合
      attendanceList: [],
      noMore:false,
      size:10,
    };
  },
  created() {
    this.getList();
    this.getAttendanceList()
  },
  mounted(){
    this.$refs.select.$refs.scrollbar.$refs.wrap.addEventListener('scroll',this.scolling)
  },
  methods: {
    scolling(){
		let e = this.$refs.select.$refs.scrollbar.$refs.wrap
	     if(this.noMore) return
	     // 到底时触发 loadMore
	     let loadMore = e.scrollHeight -  e.scrollTop <=  e.clientHeight
	     if(loadMore){
        this.size+=10;
        this.pageListByEmployer(this.size)
	     }
	},

    sortChange(e) {
      console.log("🐛 ~ sortChange ~ e:", e)
      let orderStr = e.order === "ascending" ? "asc" : "desc";
      this.queryParams.order = orderStr;
      this.queryParams.prop = e.prop;
      this.getList();
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.deptName,
        children: node.children,
      };
    },
    employerChange() {
      this.queryParams.employeeId = null;
      this.queryParams.employerDeptId = null;
      if (this.queryParams.employerId) {
        this.getDeptTree();
        this.pageListByEmployer();
      }
    },
    pageListByEmployer(size=10) {
      pageListByEmployer({
        employerId: this.queryParams.employerId,
        size,
      }).then((res) => {
        this.employeeList = res.data.records;
        this.noMore =  this.employeeList.length == res.data.total?true:false;
      });
    },
    /** 查询考勤详情列表 */
    getList() {
      this.loading = true;
      if (this.applicationDateRange.length > 0) {
        this.queryParams.applicationStartDate = this.applicationDateRange[0]
        this.queryParams.applicationEndDate = this.applicationDateRange[1];
      } else {
        this.queryParams.applicationStartDate = null;
        this.queryParams.applicationEndDate = null;
      }
      if (this.dateRange.length > 0) {
        this.queryParams.holidayStartDate = this.dateRange[0]
        this.queryParams.holidayEndDate = this.dateRange[1];
      } else {
        this.queryParams.holidayStartDate = null;
        this.queryParams.holidayEndDate = null;
      }

      if (this.approvalDateRange.length > 0) {
        this.queryParams.applyStartDate = this.approvalDateRange[0]
        this.queryParams.applyEndDate = this.approvalDateRange[1];
      } else {
        this.queryParams.applyStartDate = null;
        this.queryParams.applyEndDate = null;
      }

      listDetails(this.queryParams).then((response) => {
        this.detailsList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect(this.queryParams.employerId).then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.dateRange = [];
      this.applicationDateRange = [];
      this.approvalDateRange = [];
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 查询考勤组集合 */
    getAttendanceList() {
      jqVacationAllList().then((response) => {
        this.attendanceList = response.data;
      });
    },
    /** 导入按钮操作 */
    handleImport() {
      this.$refs.importModal.showModal();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "business/holidayApplicationRecord/exportHolidayApplicationRecord",
        {
          ...this.queryParams,
        },
        `vacationReportRecords_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style scoped lang="scss">
.header-block {
  padding: 0 16px;
}
</style>
